<template>
  <view>
    <view :hidden="userFeedbackHidden" class="popup_content">
      <view class="popup_wrapper">
        <view class="popup_title">修改昵称</view>
        <view class="popup_textarea_item">
          <input
            type="text"
            class="popup_textarea"
            v-model="nickName"
            @blur="handleNickName"
            placeholder="输入你的昵称"
          />
        </view>
      </view>
      <view class="flex btn-wrapper">
        <view @tap="submitFeedback" class="buttons confirm-btns">
          <text class="popup_button">确定</text>
        </view>
        <view @tap="hideDiv" class="buttons">
          <text class="popup_button">取消</text>
        </view>
      </view>
    </view>
    <view
      class="popup_overlay"
      :hidden="userFeedbackHidden"
      @click="hideDiv()"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    userFeedbackHidden: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      nickName: "",
    };
  },
  methods: {
    showDiv() {
      // 显示输入弹出框
      this.$emit("FeedbackHidden", false);
    },
    hideDiv() {
      // 隐藏输入弹出框
      this.$emit("cancle", true);
    },
    handleNickName(e){
        this.nickName = e.detail.value
    },
    submitFeedback() {
      // 提交
      this.$emit("confirm",true,this.nickName)
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}
.popup_overlay {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=88);
}

.popup_content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 631upx;
  height: 346upx;
  background: #ffffff;
  border-radius: 10upx;
  margin-left: -320upx;
  margin-top: -270rpx;
  z-index: 1002;
  overflow: auto;
}
.popup_wrapper {
  padding: 0 66upx;
  margin-bottom: 30upx;
}
.popup_title {
  text-align: center;
  font-size: 32upx;
  height: 40upx;
  line-height: 40upx;
  padding-top: 37upx;
  font-weight: bold;
}

.popup_textarea_item {
  height: 80upx;
  width: 100%;
  font-size: 28upx;
  border-bottom: #f1f1f1;
  margin-top: 70upx;
  text-align: center;
  border-bottom: 1upx solid #eeeeee;
}

.popup_textarea {
  font-size: 28rpx;
}

.popup_button {
  color: #000000;
}
.buttons {
  text-align: center;
  font-size: 32rpx;
  width: 50%;
  height: 120upx;
  font-size: 28upx;
  font-weight: 500;
  line-height: 120upx;
  text-align: center;
}
.confirm-btns {
  border-right: 1upx solid #eeeeee;
}
.btn-wrapper {
  border-top: 1upx solid #eeeeee;
}
</style>
